<template>
  <v-dialog
    id="dialog"
    v-model="regist_dialog"
    :fullscreen="$vuetify.breakpoint.xsOnly"
    persistent
    max-width="600px"
  >
    <v-card>
      <v-dialog id="message" v-model="message_dialog" max-width="290" persistent>
        <v-card>
          <v-card-title class="headline">:) 成功！</v-card-title>

          <v-card-text>欢迎，您已成功注册</v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" text @click="Login">现在登录！</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <v-dialog id="message" v-model="message_dialog_error" max-width="290" persistent>
        <v-card>
          <v-card-title class="headline">:（ 错误！</v-card-title>

          <v-card-text>服务器错误，请稍后再试</v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" text @click="message_dialog_error = false,loading2=false">好吧</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

    
      <v-stepper v-model="e1">
        <v-stepper-header>
          <v-stepper-step :complete="e1 > 1" step="1"></v-stepper-step>

          <v-divider></v-divider>

          <v-stepper-step :complete="e1 > 2" step="2"></v-stepper-step>

          <v-divider></v-divider>

          <v-stepper-step step="3"></v-stepper-step>
        </v-stepper-header>

        <v-stepper-items>
          <v-stepper-content step="1">
            <v-form v-model="valid1">
              <div style="text-align:center;">
                <div height="500px" flat>
                  <br />
                  <br />
                  <p class="display-2">{{$t("message.welcome")}}</p>
                  <br />
                  <br />
                  <p class="subtitle-1">{{$t("message.welcomesub")}}</p>
                  <br />
                  <br />
                  <br />
                  <v-row>
                    <v-col cols="12">
                      <v-text-field
                        rounded
                        prepend-icon="mdi-account"
                        v-model="RegistUsername"
                        counter="20"
                        :rules="nameRules"
                        label="用户名"
                        required
                        color="primary"
                        outlined
                        :error="usernameerror"
                        :error-messages="usernameerrormg"
                      ></v-text-field>
                    </v-col>
                  </v-row>
                  <br />
                  <v-btn :disabled="!valid1" color="primary" :loading="loading1" fab x-large @click="e1 = 2">
                    <v-icon>mdi-chevron-right</v-icon>
                  </v-btn>
                </div>
              </div>
              <v-btn
                text
                @click="CloseRegistdialog(),OpenLaunchdialog()"
              >{{$t('message.alreadygotaccount')}}</v-btn>

              <v-btn text color="red" @click="CloseRegistdialog()">{{$t('message.cancel')}}</v-btn>
            </v-form>
          </v-stepper-content>

          <v-stepper-content step="2">
            <v-form v-model="valid">
              <div style="text-align:center;margin:50px 0;">
                <div height="500px" flat>
                  <br />
                  <br />
                  <p class="display-2">{{$t("message.setpasswd")}}</p>
                  <br />
                  <br />
                  <p class="subtitle-1">{{$t("message.setpasswd2")}}</p>
                  <br />

                  <v-row>
                    <v-col cols="12">
                      <v-text-field
                        rounded
                        prepend-icon="mdi-key"
                        v-model="RegistPasswd"
                        counter="18"
                        :rules="passwdRules"
                        label="密码"
                        type="password"
                        color="primary"
                        required
                        outlined
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12">
                      <v-text-field
                        rounded
                        prepend-icon="mdi-key-change"
                        v-model="RegistPasswd2"
                        counter="18"
                        :rules="passwdRules2"
                        :error="passwd2error"
                        :error-messages="passwd2errormg"
                        label="确认密码"
                        type="password"
                        color="primary"
                        required
                        outlined
                      ></v-text-field>
                    </v-col>
                  </v-row>

                  <v-btn :disabled="!valid" color="primary" fab x-large @click="e1 = 3">
                    <v-icon>mdi-chevron-right</v-icon>
                  </v-btn>
                </div>
              </div>
              <v-btn text @click="e1 = 1">{{$t('message.back')}}</v-btn>

              <v-btn text color="red" @click="CloseRegistdialog()">{{$t('message.cancel')}}</v-btn>
            </v-form>
          </v-stepper-content>

          <v-stepper-content step="3">
            <v-form v-model="valid3">
              <div style="text-align:center;margin:50px 0;">
                <div height="500px" flat>
                  
                  <br />
                  <p class="display-2">{{$t("message.setemail")}}</p>
                  <br />
                  <br />
                  <p class="subtitle-1">{{$t("message.setemail2")}}</p>
                  <br />
                  <v-row>
                    <v-col cols="12">
                      <v-text-field
                        rounded
                        prepend-icon="mdi-at"
                        v-model="RegistEmail"
                        :rules="emailRules"
                        :error="emailerror"
                        :error-messages="emailerrormg"
                        label="邮箱"
                        required
                        color="primary"
                        outlined
                      ></v-text-field>
                    </v-col>
                    <v-col cols="6">
                      <v-dialog
                        ref="dialog"
                        v-model="birthmodal"
                        :return-value.sync="RegistBirth"
                        persistent
                        width="350px"
                      >
                        <template v-slot:activator="{ on }">
                          <v-text-field
                            rounded
                            v-model="RegistBirth"
                            :rules="dateRules"
                            prepend-icon="mdi-calendar-today"
                            color="primary"
                            label="生日"
                            outlined
                            v-on="on"
                          ></v-text-field>
                        </template>
                        <v-date-picker
                          v-model="Birth"
                          scrollable
                          :max="new Date().toISOString().substr(0, 10)"
                        >
                          <v-spacer></v-spacer>
                          <v-btn text color="primary" @click="birthmodal = false">取消</v-btn>
                          <v-btn text color="primary" @click="$refs.dialog.save(Birth)">确定</v-btn>
                        </v-date-picker>
                      </v-dialog>
                    </v-col>
                    <v-col class="d-flex" cols="6">
                      <v-select
                        rounded
                        v-model="RegistSex"
                        :rules="sexRules"
                        prepend-icon="mdi-gender-male-female"
                        :items="sex"
                        label="性别"
                        outlined
                      ></v-select>
                    </v-col>
                  </v-row>
				  <v-btn :disabled="!valid3" color="primary" :loading="loading2" fab x-large @click="Regist">
					  <v-icon>mdi-check</v-icon>
                  </v-btn>
                </div>
              </div>
              <v-btn text @click="e1 = 2">{{$t('message.back')}}</v-btn>
              <v-btn text color="red" @click="CloseRegistdialog()">{{$t('message.cancel')}}</v-btn>
            </v-form>
          </v-stepper-content>
        </v-stepper-items>
      </v-stepper>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data: () => ({
    emailerror:false,
    emailerrormg:"",
    usernameerror:false,
    usernameerrormg:"",
    loading1:false,
    laoding2:false,
	e1: 0,
	RegistUsername:"",
	RegistEmail:"",
    message_dialog_error: false,
    message_dialog: false,
    passwd2errormg: "",
    passwd2error: false,
    passwd_valid: false,
    RegistPasswd: "",
    RegistPasswd2: "",
    RegistBirth: "1949-10-1",
    birthmodal: false,
    valid: false,
	valid1: false,
	valid2:false,
	valid3:false,
    name: "Registdialog",
    sex: ["男", "女", "隐藏"],
    nameRules: [
      v => !!v || "必需项",
      v => (v && v.length <= 20) || "用户名不多于20位"
    ],
    //Passwd:'',
    passwdRules: [
      v => !!v || "必需项",
      v => (v && v.length <= 18) || "不多于18位",
      v => (v && v.length >= 6) || "不少于6位"
    ],
    emailRules: [
      v => !!v || "必需项",
      v => /.+@.+\..+/.test(v) || "请输入正确的邮箱地址"
    ],
    passwdRules2: [v => !!v || "必需项"],
    dateRules: [v => !!v || "必需项"],
    sexRules: [v => !!v || "必需项"]
  }),
  methods: {
    CloseRegistdialog() {
	  this.$store.commit("close_regist_dialog");
	  this.e1 = 1;
	  this.RegistUsername="";
	  this.RegistEmail="";
	  this.RegistPasswd="";
	  this.RegistPasswd2="";
    },
    OpenLaunchdialog() {
      this.$store.commit("open_launch_dialog");
      this.e1 = 1;
    },
    Regist() {
      this.loading2=true;
      var params = new URLSearchParams();
      params.append("registBean.name", this.RegistUsername); //你要传给后台的参数值 key/value
      params.append("registBean.passwd", this.RegistPasswd);
      params.append("registBean.email", this.RegistEmail);
      params.append("registBean.sex", this.RegistSex);
      params.append("registBean.birth", this.RegistBirth);
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/myregist",
        data: params
      })
        .then(response => {
          if (response.data == "success") {
            this.message_dialog = true;
          } else {
            this.message_dialog_error = true;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    Login(){
				
				this.loading2=false;
				var loginBean = new URLSearchParams();
      loginBean.append("loginBean.uidOrEmail", this.RegistEmail); //你要传给后台的参数值 key/value
      loginBean.append("loginBean.passwd", this.RegistPasswd);
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/mylogin",
        data: loginBean
      })
        .then(response => {
          if (response.data != null) {
            this.message_dialog = true;
            this.message = ":)成功";
            this.message_inner = "登录成功";
            this.launched = true;
            this.loading = false;
            location.reload();
          } else {
            this.message_dialog = true;
            this.message = ":(错误";
            this.message_inner = "账户或密码错误";
            this.launched = false;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
				  
    },
  },
  computed: {
    regist_dialog: {
      get: function() {
        return this.$store.state.regist_dialog;
      }
    }
  },
  watch: {
    RegistPasswd2: function() {
      if (this.RegistPasswd == this.RegistPasswd2) {
        this.passwd_valid = true;
        this.passwd2error = false;
        this.passwd2errormg = "";
        this.valid = true;
      } else {
        this.passwd_valid = false;
        this.passwd2error = true;
        this.passwd2errormg = "两次密码不一致";
        this.valid = false;
      }
    },
    RegistPasswd: function() {
      if (this.RegistPasswd == this.RegistPasswd2) {
        this.passwd_valid = true;
        this.passwd2error = false;
        this.passwd2errormg = "";
        this.valid = true;
      } else {
        this.passwd_valid = false;
        this.passwd2error = true;
        this.passwd2errormg = "两次密码不一致";
        this.valid = false;
      }
    },
    RegistUsername:function(){
      var params = new URLSearchParams();
      params.append("nameVerifyBean.name", this.RegistUsername); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/mynameverify",
        data: params
      })
        .then(response => {
          if(response.data=="success"){
            if(this.RegistUsername.length<=20&&this.RegistUsername.length>0){
            this.valid1=true;
            this.usernameerror=false;
            this.usernameerrormg="";
            }
          }else{
            this.valid1=false;
            this.usernameerror=true;
            this.usernameerrormg="该用户名已存在";
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    RegistEmail:function(){
      var params = new URLSearchParams();
      params.append("emailVerifyBean.email", this.RegistEmail); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/myemailverify",
        data: params
      })
        .then(response => {
          if(response.data!="success"){
                this.emailerror=true;
                this.valid3=false;
                this.emailerrormg="该邮箱已被注册";
            }else{
              this.emailerror=false;
              this.emailerrormg="";
            }
          
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  created() {},

  props: []
};
</script>

<style>
</style>
